<template>
	<view>
		<u-search v-model="search" :show-action="true" action-text="搜索" placeholder="搜索品种/代码/首字母" :clearabled="true" :animation="true" @change="changeFn" @focus="focusFn"></u-search>
		
		<view class="titcont" v-if="isFocus">
			<view class="title">
				热门合约
			</view>
			<view class="cont">
				<view class="contract_item" v-for="(item,index) in list" :key="index" @click="itemFn(item,index)">
					<text :class="index>2?'num2':'num'">{{index+1}}</text>	{{item.name}}
				</view>
			</view>
		</view>
		<view class="search_cont" v-else>
			<view class="rank_item" :id="item.product_id" v-for="(item,index) in tabs" :key="index" @click="itemFn(item,index)">
				<view class="">
					<view class="titname">					
						{{item.name}}
					</view>
					<view class="name">
						<text class="zhu" v-if="item.master">主</text>
						{{item.instrument_id.split('.')[1]}}
					</view>
				</view>
				<view class=""@click.stop="">
					<view class="text_btn" @click="addFutures(item,index)">
						{{state==index?'已自选':'+ 自选'}}		
					</view>
				</view>
				
			</view>
			<!-- <view class="rank_item">
				<view class="">
					<view class="titname">
					<text class="zhu">主</text>
						1212
					</view>
					<view class="name">
						1212
					</view>
				</view>
				<view class="text_btn" >
					+ 自选
				</view>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	import {searchData,myFutures} from '@/api/default.js'
	export default {
		data() {
			return {
				isFocus:true,
				list:[],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabs:[],
				search:'',
				state:-1,
				states:0,
				index:0,
			}
		},
		onLoad(item){
			this.index=item.index
			// if(item){
			// }
			this.hotFn()
		},
		onShow() {
			// try{
			// 	const value = uni.getStorageSync('storage_key');
			// 	// value
			// }catch(e){
			// 	//e
			// }
		},
		methods: {
			itemFn(item,index) {
				getApp().globalData.rankDetail=item
				let num=getApp().globalData.IDnum
				if(this.index==0){
					uni.navigateTo({
					// url: '/pages/tabBar/rankDetail/rankDetail?&id='+item.instrument_id+'&item=' + encodeURIComponent(JSON.stringify(item))
					url: '/pages/tabBar/rankDetail/rankDetail?bg=' + item.hlFlag + '&id='+item.instrument_id+'&index='+num
					// url: '/pages/tabBar/rankDetail/rankDetail?bg=' + item.hlFlag + '&id='+item.instrument_id+'&last_price='+item.last_price+'&pre_settlement='+item.pre_settlement
					// url: '/pages/tabBar/rankDetail/rankDetail?&item=' + encodeURIComponent(JSON.stringify(item))
					})
				}else{
					// getApp().globalData.instrumentID=item.instrument_id
					uni.switchTab({
						url: '/pages/tabBar/transaction/index?rankDetail=true'
					});
				}
				
			},
			hotFn(){
				uni.request({
					// url:'http://192.168.43.133:9500/getData',
					url: 'https://md.sou-liang.com/api/getData',
					success: (res) => {
						let num = res.data.length
						for(let i=0;i<num;i++){
							let item = res.data[i]
							for(let j=0;j<item.length;j++){
								this.list.push(item[j])
							}
						}
					}
				})
			},
			focusFn() {
				
			},
			changeFn(){
				this.isFocus=false
				// searchData({search:this.search}).then(res=>{
				//	//res
				// })
				let that=this
				uni.request({
					url:'https://md.sou-liang.com/api/searchData',
					data:{search:this.search},
					success(res) {
							that.tabs=res.data
					}
				})
			},
			addFutures(item,i){
				let {id} = uni.getStorageSync('MEMBER_INFO')
				if(id){
					uni.request({
					url: 'https://md.sou-liang.com/api/addFutures?id='+id, //192.168.43.133    47.102.157.67
					data: JSON.stringify(item),
					method:'POST',
					success: (res) => {
						if(res.statusCode==200){
							
							uni.showToast({
							title:'添加成功',
							icon:'none'
							})
							this.state=i
						}else{
							uni.showToast({
							title:res.data,
							icon:'none'
							})
						}
					}
					})
				}else{
					uni.navigateTo({
						url:'/pages/user/login/index'
					})
				}
				
			},				
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		font-size: 12px;
		font-weight: bold;
		padding:10px;
	}
	.cont{
		width: 100%;
		// display: flex;
		// justify-content: space-around;
		// flex-wrap:wrap;
		padding:0 10px;
		.contract_item{
			display: inline-block;
			width: 30%;
			font-size: 14px;
			margin: 5px;
			.num{
				font-size: 12px;
				padding: 1px 5px;
				background-color:#F53437;
				margin-right: 5px;
				color: #fff;
			}
			.num2{
				font-size: 12px;
				padding: 1px 5px;
				background-color:#d0cece;
				margin-right: 5px;
				color: #fff;
			}
		}
	}
	.search_cont{
		padding: 5px 10px;
	}
	.rank_item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 5px;
		border-bottom: 1px solid #909399;
		// background: #fff;
		.titname{
			font-size: 14px;
			font-weight: bold;		
		}
		.name{
			font-size: 12px;
			// margin-left: 20px;
			.zhu{
				font-size: 10px;
				background-color:#F17435;
				margin-right: 4px;
				color: #FFFFFF;
				// padding: 1px;
			}
		}
		.text_btn{
			border: 1px solid #303133;
			padding: 3px 10px;
		}
	}
</style>
